<template>
  <div class="loginPage">
    <div class="login">
      <h2>欢迎使用 Microsoft To-Do</h2>
      <div class="btns">
        <button @click="registerVisible = true">
          注册
        </button>
        <button @click="loginVisible = true">
          登录
        </button>
      </div>
    </div>
    <!-- 登录组件 -->
    <el-dialog
      :visible.sync="loginVisible"
      width="25%"
      top='26vh'
      :show-close='false'
      @close='loseLogin'>
      <el-form ref="form" size="small">
        <el-form-item>
          <el-input v-model='username' placeholder="用户名" autofocus></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model='password' type="password" placeholder="密码" @keyup.enter.native="userLogin"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size='mini' @click='loseLogin'>取 消</el-button>
        <el-button size='mini' type="primary" @click="userLogin">登录</el-button>
      </span>
    </el-dialog>
    <!-- 注册组件 -->
    <el-dialog
      :visible.sync="registerVisible"
      width="25%"
      top='25vh'
      :show-close='false'>
      <el-form ref="form">
        <el-input size='medium' placeholder="用户名" style='marginBottom: 15px'></el-input>
        <el-input size='medium' type='password' placeholder="密码" style='marginBottom: 15px'></el-input>
        <el-input size='medium' placeholder="邮箱"></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size='small' @click='registerVisible = false'>取 消</el-button>
        <el-button size='small' type="primary" @click="registerVisible = false">注 册</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import VueCookie from "vue-cookie";
export default {
  name: "Login",
  data() {
    return {
      loginVisible: false,
      registerVisible: false,
      username: "",
      password: ""
    };
  },
  methods: {
    ...mapActions(["login"]),

    // 点击登录
    userLogin() {
      this.login({
        password: this.password,
        username: this.username
      })
        .then(() => {
          this.$router.push("myday");
          // 登录后 获取用户清单列表
          this.$store.dispatch("getCheckList");
        })
        .catch(error => {
          if (error.code === 4003) {
            this.$message({
              message: "用户名或密码错误",
              type: "error",
              center: true
            });
          }
        });
    },
    // 取消登录，关闭弹窗
    loseLogin() {
      this.loginVisible = false;
      this.username = "";
      this.password = "";
    }
  }
};
</script>
<style scoped lang="less" src="./index.less"></style>
